<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getCollectedGoodsService, getCollectedPostService } from '@/apis/collection.js'
import ListCardComponent from '@/components/ListCardComponent/ListCardComponent.vue'
import WaterFallComponent from '@/components/WaterFallComponent/WaterFallComponent.vue'
import { formatTime } from '@/utils/formatTime.js'
import { useUserStore } from '../../stores'

const UserStore = useUserStore()

// 获取用户ID
const user_id = UserStore.UserInfoList.user_id

// 存储获取到的收藏数据
const collectedList = ref([])

// 当前选中的顶部选项
const selectedOption = ref('goods')

// 获取用户收藏的商品数据
const getCollectedGoodsData = async () => {
	const res = await getCollectedGoodsService({ user_id: user_id, is_post: false })
	collectedList.value = res.data
}

// 获取用户收藏的攻略数据
const getCollectedPostData = async () => {
	const res = await getCollectedPostService({ user_id: user_id, is_post: true })

	// 格式化发布时间
	res.data?.map((item) => (item.createdAt = formatTime(item.createdAt)))

	collectedList.value = res.data
}

// 点击商品导航项
const onClickGoods = () => {
	collectedList.value = []
	selectedOption.value = 'goods'
	getCollectedGoodsData()
}

// 点击攻略导航项
const onClickPost = () => {
	collectedList.value = []
	selectedOption.value = 'post'
	getCollectedPostData()
}

onShow(() => {
	getCollectedGoodsData()
})
</script>
<template>
	<view class="container">
		<view class="top">
			<view class="nav">
				<view class="goods" :class="{ 'nav-active': selectedOption === 'goods' }" @tap="onClickGoods">商品</view>
				<view class="post" :class="{ 'nav-active': selectedOption === 'post' }" @tap="onClickPost">攻略</view>
			</view>
		</view>

		<view class="seat"></view>

		<view class="content">
			<ListCardComponent v-if="selectedOption === 'goods'" :list="collectedList" :collect="true"></ListCardComponent>
			<WaterFallComponent v-else :list="collectedList" :collect="true"></WaterFallComponent>
			<up-empty v-if="collectedList.length === 0" textSize="20" width="250" height="250" icon="https://leyouhui-1327374532.cos.ap-beijing.myqcloud.com/Static/data.png"></up-empty>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100%;

	.top {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 110rpx;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

		.nav {
			width: 40%;
			display: flex;
			justify-content: space-between;
			font-size: 35rpx;
			font-weight: bold;

			.goods {
				position: relative;
			}

			.post {
				position: relative;
			}

			.nav-active::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: -20rpx;
				height: 8rpx;
				background-color: #8122d4;
				border-radius: 8rpx;
			}
		}
	}

	.seat {
		height: 120rpx;
		background-color: #fff;
	}
}
</style>
